{{title (concat "Search Results for '" this.q "'")}}

<div class="crates-heading" data-test-heading>
  <div class='info'>
    {{svg-jar "magnifier" width=32 height=32}}
    <h1>Search Results</h1>
  </div>
  {{#if this.q}}
    <h2>for '{{ this.q }}'</h2>
  {{/if}}

  {{#if this.dataTask.isRunning}}<img src="/assets/ajax-loader.gif" local-class="loading-spinner">{{/if}}
</div>

{{#if this.firstResultPending}}
  <div id="no-results">
    <h2>Loading search results...</h2>
  </div>
{{else if this.hasItems}}
  <div id='results'>
    <div class='nav' data-test-search-nav>
      <span class='amt'>
        Displaying
        <span class='cur'>{{ this.currentPageStart }}-{{ this.currentPageEnd }}</span>
          of <span class='total'>{{ this.totalItems }}</span> total results
      </span>
    </div>

    <div class='sort' data-test-search-sort>
      <span class='small'>Sort by </span>

      <Dropdown class="dropdown-container" as |dd|>
        <dd.Trigger class="dropdown dropdown-button" data-test-current-order>
          {{svg-jar "sort"}}
          {{ this.currentSortBy }}
          <span class='arrow'></span>
        </dd.Trigger>

        <dd.Content @tagName="ul" class="dropdown">
          <li>
            <LinkTo @query={{hash page=1 sort="relevance"}}>
              Relevance
            </LinkTo>
          </li>
          <li>
            <LinkTo @query={{hash page=1 sort="downloads"}}>
              All-Time Downloads
            </LinkTo>
          </li>
          <li>
            <LinkTo @query={{hash page=1 sort="recent-downloads"}}>
              Recent Downloads
            </LinkTo>
          </li>
          <li>
            <LinkTo @query={{hash page=1 sort="recent-updates"}}>
              Recent Updates
            </LinkTo>
          </li>
          <li>
            <LinkTo @query={{hash page=1 sort="new"}}>
              Newly Added
            </LinkTo>
          </li>
        </dd.Content>
      </Dropdown>
    </div>
  </div>

  <div id='crates' class='white-rows'>
    {{#each this.model as |crate index|}}
      {{#if crate.exact_match}}
        <div class='exact-match'>
          <LinkTo @route="crate" @model={{crate}}>
            <h1>Exact Match</h1>
          </LinkTo>
          <CrateRow @crate={{crate}} data-test-crate-row={{index}} />
        </div>
      {{else}}
        <div>
          <CrateRow @crate={{crate}} data-test-crate-row={{index}} />
        </div>
      {{/if}}
    {{/each}}
  </div>

  <Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />
{{else}}
  <div id="no-results">
    <h2>0 crates found. <a href='https://doc.rust-lang.org/cargo/getting-started/'>Get started</a> and create your own.</h2>
  </div>
{{/if}}
